<script>
import {
  addStudents, exportAll, exportApi, getClass, getClassList, getCollege,
  getStudentlist, getStudentlistExport,
  importApi, partExport,
  removeStudent,
  resetPwd,
  secrchStudent
} from "../../api/studentsAPI/https";
import compileInfo from "../../components/students/compileInfo.vue";
// import psychometricInfo from "../../components/students/psychometricInfo.vue";
// import {query} from "vue/src/platforms/web/util";
import addPage from "../../components/students/addPage.vue";
import store from "../../store";
import {download} from '../../../public/download'
import XLSX from 'xlsx'
import {getToken} from "../../utils/auth";

const plainOptions = [''];
const defaultCheckedList = [];
export default ({
  name: "index",
  components: {
    // 修改弹出框
    compileInfo,
    // psychometricInfo,
    addPage
  },
  data() {
    return {
      classValue: '',
      // 导入传参
      classId: '',
      allTable: [],
      // 全部导出 id列表
      exportAllList: [],
      xslxList: '',
      total: [],
      idData: [],
      // 禁用状态
      disabled: true,
      isShow: true,
      // 导入token
      headers: {
        Authorization: "Bearer " + getToken(), //headers属性中添加token，这个属性是el-upload自带的用来设置上传请求头部
      },

      radioState: '',
      radioSex: '',
      studetQueryList: '',
      querycollege: {
        pageSize: '',
        pageNum: '',
        name: '',
        collegeId: '',
        classId: '',
        stuNum: '',
        phoneNumber: '',

      },
      clooegeList: [],
      collegeList: [],
      newcollege: [],
      oldClassList: '',
      newClassList: [],
      psychometricTest: '',
      // 搜素学生传递参数
      querySearch: {
        pageSize: 10,
        pageNum: 1000,
        name: '',
        collegeId: '',
        classId: '',
        stuNum: '',
        phoneNumber: '',
      },
      // 多选框
      multipleSelection: [],
      // 普测信息
      generalList: '',
      // 普测信息输入框
      text: '',
      textarea: '',
      // 普测信息弹出框
      dialogVisible: false,
      // 修改信息弹出框
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      // 多选框
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
      // 分页器 传参
      querya: {
        pageSize: 10,
        pageNum: 1
      },
      queryb: {
        pageSize: 50,
        pageNum: 1
      },
      // 学生列表
      table: [],
      // 学院列表
      getCollegeList: [],
      getClassList: [],
      value: '',
      // 班级
      clsaaVlaue: '',
      // form表单
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        college: '',
        className: '',
        phoneNumber: '',
        stuNum: '',
        enrollmentTime: '',
        anamnesis: '',
        experience: '',
        medicationSituation: '',
        psychometricTest: '',
        birthday: '',
        education: '',
        gender: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formList: {},
      compile: '',
      dialogTableVisible: false,
      collegeQuery: {
        deptId: '',
        pageSize: 10,
        pageNum: 1
      },
      // 导出参数
      exportData: {
        id: ''
      }
    }
  },
  methods: {
    changeClass(val) {
      this.classValue = val
      console.log(val)
    },
    // 多选框  可获取所有点击的对象
    handleSelectionChange(val) {
      this.disabled = true;
      this.multipleSelection = val;
      console.log(this.multipleSelection)
      if (this.disabled) {
        this.isShow = false
      }
    },
    // 全部导出
// 第一步获取id
    exportAllBtn() {
      // 总列表table
      // 重新获取全部列表重新传参
      // pushid
      this.allTable.forEach(item => {
        this.exportAllList.push(item.id)
      })
      console.log(this.exportAllList)
      //全部导出接口传参
      exportAll(this.exportAllList).then(res => {
        console.log(res)
        // 引入xlsx工具包
        const XLSX = require('xlsx');
        // 将ArrayBuffer转换为二进制字符串
        const data = new Uint8Array(res);
        let binary = '';
        for (let i = 0; i < data.length; i++) {
          binary += String.fromCharCode(data[i]);
        }
        // 将二进制字符串转换为workbook对象
        const workbook = XLSX.read(binary, {type: 'binary'});
        // 将workbook对象转换为xlsx文件并保存
        XLSX.writeFile(workbook, 'all.xlsx');
      })
    },
    // 部分导出
    exportBtn() {
      console.log(this.multipleSelection)
      this.multipleSelection.forEach(item => {
        this.idData.push(item.id)
      })
      // 新数组  idData
      partExport(this.idData).then(res => {
        console.log(res)
        console.log(Object.prototype.toString.call(res));
        // 引入xlsx工具包
        const XLSX = require('xlsx');
        // 将ArrayBuffer转换为二进制字符串
        const data = new Uint8Array(res);
        let binary = '';
        for (let i = 0; i < data.length; i++) {
          binary += String.fromCharCode(data[i]);
        }
        // 将二进制字符串转换为workbook对象
        const workbook = XLSX.read(binary, {type: 'binary'});
        // 将workbook对象转换为xlsx文件并保存
        XLSX.writeFile(workbook, 'example.xlsx');
      })
    },
    // 学院 及 班级列表
    // 班级列表
    collegeChange(val) {
      this.collegeQuery.deptId = val
      //获取班级列表
      getClass(this.collegeQuery).then(res => {
        this.getClassList = res.rows
        console.log(this.getClassList)
      })
    },
    // 导入按钮
    confirmImport() {
      this.dialogTableVisible = false
      // 重新渲染列表
      // 学生列表接口
      getStudentlist().then(res => {
        this.table = res.rows
        this.total = res.total
        // console.log(this.table)
      });
    },
    // 重置按钮
    restAll() {
      this.form.name = ''
      this.form.college = ''
      this.form.grade = ''
      this.form.stuNum = ''
      this.form.phoneNumber = ''
      this.form.value = ''
      getStudentlist().then(res => {
        this.table = res.rows
      });
    },
    // 搜素按钮
    searchBtn() {
      this.querySearch.name = this.form.name
      this.querySearch.phoneNumber = this.form.phoneNumber
      this.querySearch.stuNum = this.form.stuNum
      this.querySearch.grade = this.form.grade
      this.querySearch.collegeId = this.collegeQuery.deptId
      this.querySearch.classId = this.classId
      getStudentlist(this.querySearch).then(res => {
        this.table = res.rows
        console.log(res)
      })
    },
    // 跳转心理档案页面
    record(row) {
      console.log(this.$router)
      console.log(row)
      this.studetQueryList = row
    },
    // // 普测信息弹出框  未完成
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    // 普测信息 确认按钮
    General() {
      this.dialogVisible = false
    },
    // 修改信息弹出框
    showModal(row) {
      // 判断性别
      if (row.gender === '男') {
        this.radioSex = '1'
      } else {
        this.radioSex = '2'
      }
      this.visible = true;
      this.formList = row
      console.log(this.formList)
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    // 修改密码弹出框
    resetPwdInfo(row) {
      // 点击删除弹出删除框
      this.$confirm(`此操作将重置:${row.name}学生密码为学号, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        resetPwd(`${row.id}`).then(res => {
          console.log(res)
        })
        this.$message({
          type: 'success',
          message: '重置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      })
    },
    //删除 弹出框
    remove(row) {
      // 点击删除弹出删除框
      this.$confirm('此操作将永久删除该学生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        removeStudent([row.id]).then(res => {
          console.log(res)
          getStudentlist().then(res => {
            this.table = res.rows
            this.total = res.total
            console.log(this.table)
          });
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    onSubmit() {
      console.log('submit!');
    },
    //分页器
    // handleCurrentChange(val) {
    //   getStudentlist(this.querya).then(res => {
    //     this.querya.pageNum = val
    //     // console.log(res)
    //     this.table = res.rows
    //   });
    // },
    //获取表格序号
    getIndex(index) {
      return (this.querya.pageNum - 1) * this.querya.pageSize + index + 1
    },
    // 分页器
    handleSizeChange(val) {
      this.querya.pageNum = 1
      this.querya.pageSize = val
      // console.log( this.query.pageSize)
    },

    handleCurrentChange(val) {
      // console.log(val)
      this.querya.pageNum = val
      // console.log( this.query.pageNum)
      getStudentlist(this.querya).then(res => {
        // this.query.pageNum = val
        this.table = res.rows
      });
    },

    //   普测信息
    generalTest(row) {
      console.log(row)
      this.generalList = row
      this.psychometricTest = row.psychometricTest
      // console.log(this.psychometricTest)
      this.dialogVisible = true
    },
    // 点击方块时 导出按钮解除禁用
    deriveBtn() {
    },
    //下载模版
    downTemplate() {
      exportApi().then(res => {
        console.log(typeof res)
        // console.log(JSON.parse(res))
      })
    }
  },
  created() {
    // 全部列表获取id
    getStudentlistExport(this.queryb).then(res => {
      this.allTable = res.rows
      // console.log(this.allTable)
    })
    // console.log(this.table)
    // 获取学院列表
    getCollege().then(res => {
      this.getCollegeList = res.data
    })
    // 学生列表接口
    getStudentlist().then(res => {
      this.table = res.rows
      this.total = res.total
      // console.log(this.table)
    });

  }
})
</script>

<template>
  <div>
    <div class="content">
      <!--头部搜索框盒子-->
      <header>
        <el-form ref="form" v-model="form" label-width="80px">
          <!-- 姓名-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
          </div>
          <!-- 学院  带有下拉框-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="学院">
              <el-select v-model="value" placeholder="请选择学院" @change="collegeChange(value)" clearable>
                <el-option
                  v-for="item in getCollegeList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 年级-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="年级">
              <el-input v-model="form.grade" placeholder="请输入年级" clearable></el-input>
            </el-form-item>
          </div>
          <!-- 班级 带有下拉框-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="班级">
              <el-select v-model="form.classId" placeholder="请选择班级" clearable @change="changeClass(value)">
                <el-option
                  v-for="item in getClassList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 学号-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="学号">
              <el-input v-model="form.stuNum" placeholder="请输入学号" clearable></el-input>
            </el-form-item>
          </div>
          <!-- 手机号-->
          <div class="el-col el-col-24 el-col-lg-6">
            <el-form-item label="手机号">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </div>
          <div class="el-col el-col-24 el-col-lg-6" style="text-align: center">
            <el-button @click="restAll">重置</el-button>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </div>
        </el-form>
      </header>
      <!--四个按钮盒子-->
      <div class="redact">
        <addPage class="addPage" :getCollegeList="getCollegeList"></addPage>
        <!--        dialogVisible = true   添加-->
        <el-button type="primary" @click="dialogTableVisible = true">导入</el-button>
        <el-button type="primary" :disabled="isShow" @click="exportBtn">导出</el-button>
        <el-button type="primary" @click="exportAllBtn">全部导出</el-button>
      </div>
      <!-- table盒子-->
      <div class="tableBox">
        <div class="headerTable">
          <!-- 1、-->
          <el-table
            ref="multipleTable"
            :data="table"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <!--2序号、-->
            <el-table-column
              fixed
              style="text-align: center"
              label="序号"
              type="index"
              width="127">
              <template #default="scope">
                <span v-text="getIndex(scope.$index)"></span>
              </template>
            </el-table-column>
            <!--3、-->
            <el-table-column
              prop="name"
              label="姓名"
              width="125">
            </el-table-column>
            <!--4、-->
            <el-table-column
              prop="college"
              label="学院"
              width="125">
            </el-table-column>
            <!--5、年级-->
            <el-table-column
              prop="grade"
              label="年级"
              width="125">
            </el-table-column>
            <!--6、班级 -->
            <el-table-column
              prop="className"
              label="班级"
              width="125">
            </el-table-column>
            <!--7 学号、-->
            <el-table-column
              prop="stuNum"
              label="学号"
              width="125">
            </el-table-column>
            <!--8 手机号、-->
            <el-table-column
              prop="phoneNumber"
              label="手机号"
              width="125">
            </el-table-column>
            <!--9、入学日期-->
            <el-table-column
              prop="enrollmentTime"
              label="入学日期"
              width="125">
            </el-table-column>
            <!-- 最后修改密码-->
            <el-table-column
              fixed="right"
              label="操作"
              width="218">
              <template slot-scope="scope">
                <!--编辑按钮-->
                <el-button @click="showModal(scope.row)" type="text" size="small">
                  <compileInfo :radioSex="radioSex" :formList="formList" :getCollegeList="getCollegeList">编辑
                  </compileInfo>
                </el-button>
                <!-- 普测信息-->
                <el-button @click="generalTest(scope.row)" type="text" size="small">
                  <i data-v-94c6628e="" class="el-icon-document"></i>
                  普测信息
                </el-button>
                <!--弹出框-->
                <el-button type="text" size="small" @click="remove(scope.row)">
                  <i data-v-94c6628e="" class="el-icon-delete"></i>
                  删除
                </el-button>
                <router-link :to="{path:'/record',query:{list:studetQueryList}}">
                  <el-button type="text" size="small" @click="record(scope.row)">
                    <i data-v-94c6628e="" class="el-icon-paperclip"></i>
                    心理档案
                  </el-button>
                </router-link>
                <!--删除密码-->
                <el-button type="text" size="small" @click="resetPwdInfo(scope.row)">
                  <i data-v-94c6628e="" class="el-icon-key"></i>
                  重置密码
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--          </el-table>-->
        </div>
        <!--普测信息弹出框-->
        <el-dialog
          title="普测信息"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>
          <el-input
            type="textarea"
            placeholder="请填写普测信息"
            v-model="this.psychometricTest"
            maxlength="200"
            show-word-limit
            resize="none"
            :value="this.psychometricTest"
          >
          </el-input>
          </span>
          <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="General()">确 定</el-button>
                  </span>
        </el-dialog>
        <!--分页器盒子-->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            background
            :current-page="querya.pageNum"
            :pageSize="querya.pageSize"
            layout=" prev, pager, next"
            @size-change="handleSizeChange"
            :total="(this.total)/1">
          </el-pagination>
        </div>
        <!-- 导出弹出框-->
        <el-dialog
          title="学生导入"
          :visible.sync="dialogTableVisible"
          width="30%"
          :before-close="handleClose">
          <el-upload
            :headers="headers"
            class="upload-demo"
            drag
            action="http://1.117.81.216:8086/stage-api/system/student/import"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">仅允许导入xlsx格式文件。
              <a
                style="color: #00afff"
                href="/学生导入模板.xlsx"
                download>下载模板</a>
            </div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmImport">确 定</el-button>
  </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
header {
  overflow: hidden;
}

.content {
  padding: 26px 25px;
  width: 100%;
}

.redact {
  margin: 10px 0 20px;
}

.headerTable {
  text-align: center;
}

.cell {
  text-align: center;
}

//分页器盒子
.block {
  padding: 20px 0;
  float: right;
}

::v-deep .el-dialog__header {
  background-color: rgb(46, 146, 255);
}

::v-deep .el-dialog {
  //width: 700px !important;
}

::v-deep .el-textarea__inner {
  height: 200px;
}

.addPage {
  float: left;
  margin-right: 10px;
}

//导入弹出框样式
::v-deep .el-dialog__body {
  padding: 30px 48px;
}

::v-deep .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

::v-deep .el-select.el-select--medium {
  width: 100%;
}
</style>
